<template>
  <div id="modal">
    <div class="window" v-if="isRead === 0">
      <div class="windowTop">
        <div class="windowTitle">完善信息</div>
      </div>
      <div class="windowBottom">
        <div class="windowInfor">
          <div class="header">
            <div class="headerImg">
              <img :src="user.headImage" alt="" />
            </div>
            <div class="camera">
              <input type="file" @change="addImg($event)" />
              <div class="cameraImg">
                <img src="../assets/imgs/xiangji.png" alt="" />
              </div>
            </div>
          </div>
          <div class="right">
            <div class="inforName">
              <input
                type="text"
                maxlength="7"
                placeholder="昵称"
                v-model="user.nickName"
                v-focus="focusState"
                @blur="focusState = false"
                @change="changeName"
              />
              <div class="nameIcon" @click="onFocus">
                <img src="../assets/imgs/gaimz.png" alt="" />
              </div>
            </div>
            <div class="sex">
              <div
                class="sex-btn "
                @click="changeSex(1)"
                :class="[user.sex == 1 ? 'changeBtn' : '']"
              >
                男
              </div>
              <div
                class="sex-btn"
                @click="changeSex(0)"
                :class="[user.sex == 0 ? 'changeBtn' : '']"
              >
                女
              </div>
              <div
                class="sex-btn"
                @click="changeSex(2)"
                :class="[user.sex == 2 ? 'changeBtn' : '']"
              >
                保密
              </div>
            </div>
          </div>
        </div>
        <div class="inforIntro">
          <div class="introTitle">- 个性签名 -</div>
          <textarea
            name=""
            id=""
            cols="30"
            rows="10"
            placeholder="请输入个性签名..."
            maxlength="140"
            v-model="user.introduce"
          ></textarea>
        </div>
        <div class="inviteCode">
          <input placeholder="输入邀请码" maxlength="6" v-model="code" />
          <div class="defaultText">(此项非必填项)</div>
        </div>
        <div class="userAgree">
          <input type="checkbox" class="auto-radio" v-model="checkAgree" />
          <label class="auto-span">我已阅读并同意</label>
          <span @click="goAgree(0)">{{ agreeList[0].title }}</span>
          <span @click="goAgree(1)">{{ agreeList[1].title }}</span>
        </div>
        <div class="question" @click="next">进入答题</div>
      </div>
    </div>
    <div class="window" v-if="isRead === 1">
      <div class="windowTop">
        <div class="windowTitle">{{ agreeTitle }}</div>
        <div class="Back" @click="back">返回</div>
      </div>
      <div class="AgreeTile">欢迎加入来闻</div>
      <div class="AgreeCtn" v-html="agreeCtn" v-loading="loading"></div>
    </div>
    <Question v-if="isRead === 2" :fatherModal="modalType"></Question>
  </div>
</template>

<script>
import Question from "../components/Question";
import defaultImg from "../assets/imgs/default.png";
export default {
  data() {
    return {
      user: "",
      url: "",
      code: "",
      checkAgree: false,
      isRead: 0,
      agreeCtn: "",
      loading: true,
      focusState: false,
      agreeTitle: "",
      agreeList: [
        {
          title: "",
        },
        {
          title: "",
        },
      ],
      modalType: 0,
    };
  },
  components: {
    Question,
  },
  //自定义获取焦点指令
  directives: {
    focus: {
      update: function(el, { value }) {
        if (value) {
          el.focus();
        }
      },
    },
  },
  created() {
    this.getInfor();
    this.getAgree();
  },
  mounted() {},
  methods: {
    //获取焦点
    onFocus() {
      this.focusState = true;
      console.log(111);
    },
    getInfor() {
      this.user = JSON.parse(localStorage.getItem("user"));
      if (this.user.headImage == null) {
        this.user.headImage = defaultImg;
      }
    },
    //更改昵称
    changeName() {
      if (this.user.nickName.trim().length < 2) {
        return false;
      } else {
        return true;
      }
    },
    //更改性别
    changeSex(e) {
      this.user.sex = e;
    },
    back() {
      this.isRead = 0;
    },

    // 初始化用户协议
    async getAgree() {
      // this.isRead = 1;
      const res = await this.$fetch(`/laiwen/agreement/frontend/agree`);
      this.agreeList = res.list;
      this.loading = false;
      // this.agreeCtn = res.agree.agree;
    },
    // 查看用户协议
    async goAgree(index) {
      this.isRead = 1;
      this.loading = false;
      this.agreeCtn = this.agreeList[index].agree;
      this.agreeTitle = this.agreeList[index].title;
    },
    // 更改个性签名
    changeIntroduce() {
      this.user.introduce = this.introduce;
    },
    //上传头像
    addImg(e) {
      let fileLen = e.target.files.length;
      console.log(fileLen);
      for (let i = 0; i < fileLen; i++) {
        let file = e.target.files[i];
        console.log(file);
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          this.url = e.target.result;
          //上传到服务器
          this.$post(`/laiwen/upload/file/baseimage`, this.url).then((res) => {
            this.user.headImage = res.downUrl;
          });
        };
      }
    },
    //@parma modalType:答题模态窗
    //@parma isRead:模态窗种类
    saveUser({ openid, modalType, isRead }) {
      //判断手机号为空时
      if (this.user.phoneNumber == void 0) {
        this.user.phoneNumber = "";
      }
      this.$post(
        `/laiwen/user/frontend/WXsave?openid=${openid}&phoneNum=${this.user.phoneNumber}`,
        this.user
      ).then((res) => {
        if (res.code == 70008) {
          this.$message.error("昵称已存在");
          return false;
        }

        localStorage.setItem("user", JSON.stringify(res.user));
        this.modalType = modalType;
        this.isRead = isRead;
      });
    },
    //校验邀请码
    checkCode(openid) {
      if (this.code) {
        this.$post(
          `/laiwen/invitecode/frontend/testcode?inviteCode=${this.code}`
        ).then((res) => {
          //输入的邀请码错误 并登录
          if (res.code == 500) {
            this.$message.error("邀请码错误");
          } else if (res.code == 0) {
            console.log("邀请码成功");
            //成功模态窗
            this.saveUser({ openid, modalType: 1, isRead: 2 });
          }
        });
      } else {
        //答题模态窗
        this.saveUser({ openid, modalType: 0, isRead: 2 });
      }
    },
    //进入答题
    next(e) {
      let that = this;
      let openid = localStorage.getItem("openid");
      if (openid) {
        openid = JSON.parse(openid);
        console.log(`当前的openid为:${openid}`);
      } else {
        openid = null;
      }

      //判断用户协议
      if (this.checkAgree === false) {
        that.$message.error("请先阅读用户协议");
        return false;
      }
      if (this.code) {
        //调用邀请码
        that.checkCode(openid);
        //调用邀请码使用次数
        that
          .$post(`/laiwen/invitecode/frontend/usercode?inviteCode=${that.code}`)
          .then((res) => {});
      }else{
          this.saveUser({ openid, modalType: 0, isRead: 2 });
      }
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style lang="scss" scoped>
.flexBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.changeBtn {
  background: rgba(252, 236, 91, 1) !important;
  opacity: 1;
  color: #090909 !important;
  border: 0.01rem solid transparent !important;
}
.window {
  width: 4rem;
  height: 5rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rem 0.01rem 0.06rem rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 0.05rem;
  box-sizing: border-box;
  padding-left: 0.32rem;
  padding-right: 0.32rem;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .windowTop {
    width: 100%;
    height: 0.86rem;
    border-bottom: 0.01rem solid #eeeeee;
    position: relative;
    .windowTitle {
      height: 0.48rem;
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(48, 48, 48, 1);
      position: absolute;
      bottom: 0;
      opacity: 1;
      border-bottom: 0.02rem solid #303030;
    }
    .Back {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 0.48rem;
      font-family: PingFang SC;
      cursor: pointer;
      color: #6e6e6e;
      font-size: 0.16rem;
    }
  }
  .windowBottom {
    width: 100%;
    box-sizing: border-box;
    padding-top: 0.2rem;
    .windowInfor {
      width: 100%;
      height: 0.95rem;
      display: flex;
      .header {
        width: 0.95rem;
        height: 0.95rem;
        border-radius: 50%;
        overflow: hidden;
        border: 0.03rem solid #efefef;
        position: relative;
        .headerImg {
          width: 100%;
          height: 100%;
        }
        .camera {
          width: 0.94rem;
          height: 0.26rem;
          background: rgba(0, 0, 0, 1);
          opacity: 0.18;
          position: absolute;
          @extend .flexBox;
          bottom: 0;
          overflow: hidden;
          cursor: pointer;
          & input {
            opacity: 0;
            cursor: pointer;
            position: absolute;
            bottom: 0;
            z-index: 1;
            opacity: 0;
            outline: none;
          }
          .cameraImg {
            width: 0.15rem;
            height: 0.12rem;
            opacity: 1;
          }
        }
      }
      .right {
        width: 1.74rem;
        margin-left: 0.36rem;
        .inforName {
          width: 2rem;
          text-align: left;
          align-items: center;
          font-size: 0.16rem;
          font-family: PingFang SC;
          font-weight: 400;
          display: flex;
          color: rgba(9, 9, 9, 1);
          & input {
            margin-right: 0.14rem;
            outline: none;
            border: none;
            text-align: center;
            width: 1.44rem;
            height: 0.28rem;
            background: rgba(244, 244, 244, 1);
            opacity: 1;
            border-radius: 0.21rem;
          }
          .nameIcon {
            width: 0.18rem;
            cursor: pointer;
            height: 0.18rem;
          }
        }
        .sex {
          width: 1.64rem;
          height: 0.21rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 0.22rem;
          .sex-btn {
            width: 0.4rem;
            height: 0.21rem;
            border: 0.01rem solid rgba(152, 152, 152, 1);
            opacity: 1;
            border-radius: 0.4rem;
            font-size: 0.12rem;
            font-family: PingFang SC;
            cursor: pointer;
            font-weight: 400;
            text-align: center;
            justify-content: center;
            display: flex;
            align-items: center;
            color: rgba(152, 152, 152, 1);
            opacity: 1;
          }
        }
      }
    }
    .inforIntro {
      width: 3.36rem;
      height: 0.91rem;
      flex-direction: column;
      @extend .flexBox;
      margin-top: 0.18rem;
      .introTitle {
        height: 0.17rem;
        font-size: 0.12rem;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 0.17rem;
        color: rgba(132, 132, 132, 1);
        opacity: 1;
        margin-bottom: 0.08rem;
      }
      & textarea {
        width: 3.36rem;
        height: 0.66rem;
        background: rgba(255, 255, 255, 1);
        border: 0.01rem solid rgba(221, 221, 221, 1);
        opacity: 1;
        font-size: 0.14rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(152, 152, 152, 1);
        border-radius: 0.05rem;
        box-sizing: border-box;
        outline: none;
        resize: none;
        padding: 0.08rem 0.12rem;
        ::placeholder {
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(152, 152, 152, 1);
          opacity: 1;
        }
      }
    }
    .inviteCode {
      width: 100%;
      height: 0.42rem;
      margin-top: 0.16rem;
      display: flex;
      align-items: center;
      & input {
        width: 2.21rem;
        height: 0.42rem;
        border: 0.01rem solid rgba(221, 221, 221, 1);
        opacity: 1;
        font-size: 0.14rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(152, 152, 152, 1);
        box-sizing: border-box;
        padding: 0.11rem 0.12rem;
        border-radius: 0.05rem;
        outline: none;
        margin-right: 0.22rem;
        ::placeholder {
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(152, 152, 152, 1);
        }
      }
      .defaultText {
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(152, 152, 152, 1);
        font-size: 0.13rem;
      }
    }
    .userAgree {
      width: 100%;
      height: 0.18rem;
      display: flex;
      align-items: center;
      font-size: 0.13rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
      opacity: 1;
      margin-top: 0.2rem;
      label {
      }
      span {
        cursor: pointer;
        text-decoration: underline;
        margin-left: 0.12rem;
      }
      & input[type="checkbox"] {
        width: 0.16rem;
        height: 0.16rem;
        background: rgba(255, 255, 255, 1);
        opacity: 1;
        display: inline-block;
        outline: none;
        position: relative;
        cursor: pointer;
        //去掉了小蓝角
        appearance: none;
      }
      & input[type="checkbox"]::before {
        content: "";
        position: absolute;
        top: 0;
        text-align: center;
        vertical-align: middle;
        left: 0;
        line-height: 0.16rem;
        background: #fff;
        border-radius: 0.05rem;
        border: 0.01rem solid #d0d0d0;
        width: 0.16rem;
        height: 0.16rem;
        outline: none;
      }
      & input[type="checkbox"]:checked::before {
        content: "\2713";
        background-color: #ffe300;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        outline: none;

        font-weight: bold;
      }
      .auto-radio {
        margin-right: 0.1rem;
      }
    }
    .question {
      width: 3.36rem;
      height: 0.42rem;
      background: rgba(255, 227, 0, 1);
      opacity: 1;
      border-radius: 0.05rem;
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      @extend .flexBox;
      color: rgba(48, 48, 48, 1);
      opacity: 1;
      margin-top: 0.23rem;
      cursor: pointer;
    }
  }
  .AgreeTile {
    height: 0.22rem;
    font-size: 0.16rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(9, 9, 9, 1);
    opacity: 1;
    margin-top: 0.16rem;
  }
  .AgreeCtn {
    widows: 3.39rem;
    height: 3.31rem;
    overflow-y: auto;
  }
}
</style>
